<template>
	<view class="root">
		<label
			:style="{ padding: `33rpx 24rpx` }"
			class="bgc-fe5a59 color-fff fs-30 jc-sb"
		>
			<text>订单状态</text>
			<text>
				{{
					orderDetail.other.orderStatus +
					" " +
					orderDetail.other.amount
				}}
			</text>
		</label>
		<label :style="{ padding: `44rpx 24rpx` }" class="bgc-fff">
			<image
				class="width-94 height-94 br-circle bgc-eee"
				:src="orderDetail.other.avatarUrl"
				mode="aspectFill"
			/>
			<text class="ml-34 color-333 fs-30">
				{{ orderDetail.other.nickName }}
			</text>
		</label>
		<view class="shareRed-info bgc-fff mt-14 fs-26">
			<label v-for="(info, key) in orderDetail.shareRedInfo" :key="key">
				<text class="color-333">{{ info.title }}</text>
				<text class="color-999">{{ info.value }}</text>
			</label>
		</view>

		<view class="order-info bgc-fff mt-14 fs-26">
			<label v-for="(info, key) in orderDetail.orderInfo" :key="key">
				<text class="color-333">{{ info.title }}</text>
				<text :style="{ color: key === 'term' ? '#fe5a59' : '#999' }">
					{{ info.value }}
				</text>
			</label>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class ShareRedDetailed extends Vue {
		// component property

		orderDetail: AnyObject = {
			shareRedInfo: {},
			orderInfo: {},
			other: {
				avatarUrl: "",
				nickName: "--",
				orderStatus: "--",
				amount: "--",
			},
		};

		onLoad({ id }: { id: string }) {
			uni.showLoading({ title: "Loading..." });
			this.$request.get("/index/bounsDetail", { id }).then(({ data }) => {
				uni.hideLoading();
				this.orderDetail = data;
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss

	.order-info,
	.shareRed-info {
		padding: 30rpx 24rpx;
		label {
			justify-content: space-between;
			line-height: 3;
		}
	}
	.order-info {
		&::before {
			content: "订单信息";
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
			margin-bottom: 22rpx;
		}
	}
</style>